<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="增加支付配置">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="支付标识" size="mini" prop="key">
              <el-input v-model="form.key" name="key">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付名称" size="mini" prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式" size="mini" prop="payType">
              <el-radio-group v-model="form.payType">
                <el-radio label="shop">微信直连支付</el-radio>
                <el-radio label="platform">服务商支付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payType=='platform'">
            <el-form-item label="服务商" size="mini" prop="payProvider">
              <el-select style="width: 100%;" v-model="form.payProvider" filterable clearable placeholder="请选择">
                <el-option v-for="item in payProviderOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.payType=='shop'">
            <el-form-item label="商户Key" size="mini" prop="mchKey">
              <el-input v-model="form.mchKey" name="mchKey">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="appId" size="mini" prop="appId">
              <el-input v-model="form.appId" name="appId">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商户号" size="mini" prop="mchId">
              <el-input v-model="form.mchId" name="mchId">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="费率" size="mini" prop="rate">
              <el-input v-model="form.rate" name="rate">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payType=='shop'">
            <el-form-item label="证书路径" size="mini" prop="keyPath">
              <el-input v-model="form.keyPath" name="keyPath">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="通知Url" size="mini" prop="notifyUrl">
              <el-input v-model="form.notifyUrl" name="notifyUrl">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" size="mini" prop="note">
              <el-input v-model="form.note" name="note" type="textarea"></el-input>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="add">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";
  var config = {};
  config.methods = {};
  config.mixins = [common];


  config.data = function () {
    return {
      form: {
        key: '',
        name: '',
        payType: '',
        platformId: '',
        platformMchId: '',
        appId: '',
        mchId: '',
        mchKey: '',
        keyPath: '',
        notifyUrl: '',
        rate: '',
        note: ''
      },
      payProviderOptions:[],
      rules: {
        key: [{
          required: true,
          message: '请输入支付标识',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入支付名称',
          trigger: 'blur'
        }],
        payType: [{
          required: true,
          message: '请输入支付模式',
          trigger: 'blur'
        }],
        platformId: [{
          required: true,
          message: '请输入服务商Id',
          trigger: 'blur'
        }],
        platformMchId: [{
          required: true,
          message: '请输入服务商户号',
          trigger: 'blur'
        }],
        appId: [{
          required: true,
          message: '请输入appId',
          trigger: 'blur'
        }],
        mchId: [{
          required: true,
          message: '请输入商户号',
          trigger: 'blur'
        }],
        mchKey: [{
          required: true,
          message: '请输入商户Key',
          trigger: 'blur'
        }],
        keyPath: [{
          required: true,
          message: '请输入证书路径',
          trigger: 'blur'
        }],
        notifyUrl: [{
          required: true,
          message: '请输入通知Url',
          trigger: 'blur'
        }],
      }
    }
  };




  config.methods.add = function () {
    var self = this;
    this.$refs["ruleForm"].validate(function (valid) {
      if (valid) {
        self.addData();
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }

  config.methods.addData = function () {
    var self = this,
      data = this.form;
    if (this.deforeAddData) {
      this.deforeAddData();
    }
    this.postData("/tenantRest/payconfig/create.htm", data, function (res) {
      if (res.code == 0) {
        self.$message({
          message: '添加数据成功',
          type: 'success'
        });
        self.$router.go(-1);
      } else {
        self.$message.error(res.msg);
      }
    });
  }



  config.mounted = function () {
			var self = this;
			var param = {};
			param.sortMethod = "asc";
			param.sortField = "id";
			param.level = 1;
			param.size = 500;
			param.fetch = 0;
			this.postData("/tenantRest/payprovider/list.htm", param, function (result) {
				if (result.code == 0) {
					self.payProviderOptions= result.list;
				}
			});
  }


  export default config;
</script>

<style scoped>
</style>